<template>
  <div class="weui-panel">
    <!-- <Weui-search-bar @search="search"></Weui-search-bar> -->
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell">
           <p class="explanation">代理中心备用入口密码设置</p>
          </div>
        </div>
        <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell">
            <div class="weui-cell__hd">
              <label for="" class="weui-label">新密码</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="password" value="weui input error" placeholder="请输入新密码" v-model="password">
            </div>
            <div class="weui-cell__ft">
              <i class="weui-icon-warn"></i>
            </div>
          </div>
        </div>
        <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell">
            <div class="weui-cell__hd">
              <label for="" class="weui-label">确认密码</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="password" value="weui input error" placeholder="请输入确认密码" v-model="password2">
            </div>
            <div class="weui-cell__ft">
              <i class="weui-icon-warn"></i>
            </div>
          </div>
        </div>
         <div class="weui-cells weui-cells_form" >
          <div class="weui-cell weui-cell">
           <a href="javascript:;" class="weui-btn weui-btn_primary" @click="confirmEdit">确认修改</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'md5';
import { mapState } from 'Vuex'

export default {
  data() {
    return {
      listTitle: ['头像', '昵称/ID', '本月销售', '电话'],
      password: '',
      password2: ''
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode', 'user'])
  },
  mounted() {
  },
  methods: {
    confirmEdit() {
      console.log(md5(this.password))
      console.log(this.api.homePage)
      if ( this.password2 === '' ||this.password === '') {
       return  $.alert("请将所有项填写完整");
      }
      if (this.password !== this.password2) {
        return $.alert("两次输入的密码不一致");
      }
      let send = {password: md5(this.password)}
      this.api.homePage.editPassword(send).then(res => res.json()).then(data => {
        console.log('editPassword', data)
          $.alert(data.message)
      })
      window.btn_sound.play();
    },

  }
}

</script>

<style lang="less" scoped>
.weui-flex__item{
  margin: 50px 0;
}
.weui-panel {
  height: 100%;
  background: transparent;
  padding-top: 4rem;
}
.weui-flex {
  height: 100%;
  align-items: center;
  justify-content: center;
}
.explanation {
  font-size: 1.1rem;
  text-align: center;
  padding: 2rem 0;
  width: 100%;
}
</style>